const { src, dest, parallel, series, watch } = require('gulp'),
    autopfefixer = require('gulp-autoprefixer'),
    cleanCss = require('gulp-clean-css'),
    rename = require('gulp-rename'),
    uglify = require('gulp-uglify'),
    babel = require('gulp-babel'),
    htmlmin = require('gulp-htmlmin'),
    imagemin = require('gulp-imagemin'),
    browerSync = require('browser-sync').create(),
    cloneJs = () => {
        return src('./src/js/*.min.js',{
            base: './src'
        }).pipe(dest('./dist'));
    },
    css = () => {
        return src('./src/css/*.css',{
            base: './src'
        }).pipe(autopfefixer())
        .pipe(cleanCss()).pipe(rename({extname:".min.css"}))
        .pipe(dest('./dist'))
    },
    js = () => {
        return src('./src/js/index.js', {
            base: './src'
        }).pipe(babel({presets:['babel-preset-env']}))
        .pipe(uglify())
        .pipe(rename({extname:'.min.js'}))
        .pipe(dest('./dist'));
    },
    html = ()=> {
        return src('./src/index.html',{
            base: './src'
        }).pipe(htmlmin({collapseWhitespace: true,
            minifyCSS: true,
            minifyJS:true
        })).pipe(dest('./dist'));
    },
    img = () => {
        return src('./src/img/**', {
            base: './src'
        }).pipe(imagemin()).pipe(dest('./dist'));
    },
    serve = () => {
        watch('./src/css/**', css);
        watch('./src/js/**', js);
        watch('./src/img/**', img);
        watch('./src/index.html', html);
        browerSync.init({
            files:'./dist/**',
            notify: false,
            server: {
                baseDir: './dist',
            },
            port: 3001
        });
    },
    go = series(parallel(cloneJs, css, js ,html,img), serve);

module.exports ={
    go
}

